<template>
    <n-form :model="accomUserForm" label-placement="left" label-align="right" label-width="120"
        require-mark-placement="right-hanging">
        <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="12" :label="$t('tableColumnLabel.accompanyName')" path="name">
                <n-input v-model:value="accomUserForm.name" placeholder="请输入陪玩名称" disabled />
            </n-form-item-gi>
            <n-form-item-gi :span="12" :label="$t('tableColumnLabel.sex')" path="rank">
                <n-radio-group v-model:value="accomUserForm.sex" disabled>
                    <n-radio-button :label="$t('unit.man')" value="1">
                    </n-radio-button>
                    <n-radio-button :label="$t('unit.woman')" value="0">
                    </n-radio-button>
                </n-radio-group>
            </n-form-item-gi>
        </n-grid>
        <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="12" :label="$t('tableColumnLabel.price')" path="price">
                <n-input-number v-model:value="accomUserForm.price" :min="0" :max="50000" style="width:100%" disabled>
                    <template #prefix>
                        ￥
                    </template>
                </n-input-number>
            </n-form-item-gi>
            <n-form-item-gi :span="12" :label="$t('tableColumnLabel.discountPrice')" path="discount">
                <n-input v-model:value="accomUserForm.discount" disabled>
                </n-input>
            </n-form-item-gi>
        </n-grid>
        <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="12" :label="$t('tableColumnLabel.proxyUserName')" path="name">
                <n-input v-model:value="form.proxyUserName" placeholder="请输入代理名称" disabled />
            </n-form-item-gi>
            <n-form-item-gi :span="12" :label="$t('tableColumnLabel.proxyUserTel')" path="accomType">
                <n-input v-model:value="form.proxyUserqq" placeholder="请输入代理QQ号" disabled />
            </n-form-item-gi>
        </n-grid>
    </n-form>
    <n-divider dashed>
        {{ $t('text.detailText') }}
    </n-divider>
    <n-form ref="formRef" :rules="rules" :model="form" label-placement="left" label-align="right" label-width="120"
        require-mark-placement="right-hanging">
        <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="12" :label="$t('tableColumnLabel.bossName')" path="bossName">
                <n-input v-model:value="form.bossName" placeholder="请输入老板名称" />
            </n-form-item-gi>
            <n-form-item-gi :span="12" :label="$t('tableColumnLabel.bossTel')"  path="bossTel">
                <n-input v-model:value="form.bossTel" placeholder="请输入老板联系方式" />
            </n-form-item-gi>
        </n-grid>
        <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="12" :label="$t('form.bossReq')" path="bossReq">
                <n-input type="textarea" v-model:value="form.bossReq" placeholder="请输入老板需求" />
            </n-form-item-gi>
            <n-form-item-gi :span="12" :label="$t('tableColumnLabel.accompanyTime')" path="time" style="width:100%">
                <n-date-picker v-model:value="form.time" type="datetimerange" clearable />
            </n-form-item-gi>
        </n-grid>
        <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="12" :label="$t('tableColumnLabel.bossPay')" path="bossPay">
                <n-input-number v-model:value="form.bossPay" :min="0" :max="50000" style="width:100%">
                    <template #prefix>
                        ￥
                    </template>
                </n-input-number>
            </n-form-item-gi>
            <n-form-item-gi :span="12" :label="$t('form.accomBusinessType')" path="accomType" style="width:100%">
                <n-select v-model:value="form.accomType" :options="props.businessDict.filter(item => Boolean(item.value))" placeholder="请选择业务类型">
                </n-select>
            </n-form-item-gi>
        </n-grid>
    </n-form>
</template>

<script setup lang='ts'>
import { useUserStore } from '@/stores/user';
import { FormInst, FormRules} from 'naive-ui';
const userStore = useUserStore();
const { userInfo } = userStore;
const props = defineProps({
    accomUser: {
        type: Object,
        default: ''
    },
    businessDict: {
        type: Array as PropType<Array<{ value: any; label: string }>>,
        default: () => []
    }
})
const formRef = ref<null | FormInst>(null);
const rules: FormRules = {
    bossName: [
        {
            required: true,
            trigger: ['input', 'blur'],
            message: '请填写老板名称'
        }
    ],
    bossTel: [
        {
            required: true,
            trigger: ['input', 'blur'],
            message: '请填写老板联系方式'
        }
    ],
    bossReq: [
        {
            required: true,
            trigger: ['input', 'blur'],
            message: '请填写支付金额'
        }
    ],
    time: [
        {
            required: true,
            trigger: ['input', 'blur'],
            validator(_, value: string) {
                if (!value[0] || !value[1]) {
                    return new Error('需要填写截止时间和开始时间！')
                }
                return true;
            },
        }
    ],
    bossPay: [
        {
            required: true,
            trigger: ['input', 'blur'],
            validator(_, value: string) {
                if (value === null || value === undefined) {
                    return new Error('请填写金额')
                }
                return true;
            },
        }
    ],
    accomType: [
        {
            required: true,
            trigger: ['input'],
            message: '请选择陪玩类型'
        }
    ]
}
const accomUserForm = reactive({
    id: '',
    name: '',
    sex: '',
    price: 0,
    discount: 0,
});
const form = reactive({
    proxyUserId: userInfo.id,
    proxyUserName: userInfo.chinaname,
    proxyUserqq: userInfo.qqnumber,
    bossName: '',
    bossTel: '',
    bossReq: '',
    time: [Date.now(), Date.now()],
    bossPay: 0,
    accomType: null
});
onMounted(() => {
    accomUserForm.name = props.accomUser.name;
    accomUserForm.sex = props.accomUser.sex;
    accomUserForm.price = props.accomUser.price;
    accomUserForm.discount = props.accomUser.discount;
    accomUserForm.id = props.accomUser.id
});
const submitForm = () => {
    return new Promise((resolve) => {
        formRef.value?.validate((errors) => {
            if (!errors) {
                resolve({
                    code: 200,
                    form,
                    accomUserForm,
                });
            } else {
                resolve({
                    code: 400
                });
            }
        });
    });
}
defineExpose({
    submitForm
})
</script>
<style scoped lang='scss'></style>